<template>
	<div class="comment_list">
		<ul>
			<li v-for="(item, index) in commentlistData" class="comment_list_item">
				<div>
					<img :src="item.logo" :alt="item.username" />
				</div>
				<div>
					<h1>{{item.username}}</h1>
					<p>{{item.content}}</p>
					<p><span>{{item.time}}</span><span>
						<a v-if="item.ispraise > 0"><i class="icon-12 on"></i><i>{{item.praisecount}}</i></a>
						<a @click="addGoods($event, item.id)" v-if="item.ispraise < 1"><i class="icon-12"></i><i>{{item.praisecount}}</i></a>
						<!--a @click="postReply($event, item.id)"><i class="icon-uniE908"></i><i></i></a-->
					</span></p>
				</div>
			</li>
		</ul>
		<a @click="moreComment($event)" class="more_comment" v-if="count>0 && commentPageNum+1 <= commentPageTotal">加载更多</a>
	</div>
</template>

<script>
	export default {
		name:"CommentList",
		props:["commentlistData","count","newsId", "newsTitle", "newsDate", "commentPageNum", "commentPageTotal"],
		data:function(){
			return{
				
			}
		},
		methods:{
			addGoods(e){
				
			},
			postReply(e){
				
			},
			moreComment(e){
				this.$emit("getMoreComments", this.commentPageNum+1);
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.comment_list{
		padding:10/@base 0;
		ul{
			li{
				display:flex;
				padding:10/@base 20/@base;
				div{
					&:first-child{
						width:40/@base;
						height: 40/@base;
						border-radius: 40/@base;
						overflow: hidden;
						img{
							width:100%;
							height: 100%;
							border-radius: 40/@base;
						}
						margin:0 10/@base 0 0;
					}
					&:last-child{
						width:99%;
						h1{
							font-size: 24/@base;
							font-weight: 400;
						}
						p{
							margin-top:10/@base;
							font-size: 24/@base;
							display:flex;
							overflow:hidden;
							span{
								display:block;
								font-size:20/@base;
								width:50%;
								&:first-child{
									color:#999;
								}
								&:last-child{
									text-align: right;
									a{
										i{
											font-style: normal;
											margin-right:5/@base;
											&.on{
												color:#CC2020;
											}
										}
										&:last-child{
											margin-left:10/@base;
										}
									}
								}
							}
						}
					}
				}
			}
		}
		a{
			&.more_comment{
				width:100%;
				text-align: center;
				font-size: 20/@base;
				display: block;
				padding:20/@base 0;
				color:#999999;
			}
		}
	}
</style>
